
<!-- Main content -->

<div style="display:none;margin: 0 auto;width:300px; height:500px;line-height: 500px;font-size: 30px; text-align: center">
    欢迎<!--欢迎使用USEN's ERP-->
</div>
<div style="width: 100%; overflow: hidden;">

    <div id="polyLine" style="width: 80%;margin:0 auto;height:400px;"></div>
    <div id="pieChart" style="width: 80%;margin:0 auto;height:400px;"></div>
    <div id="histogram" style="width: 80%;margin:0 auto;height:400px;"></div>
</div>
<!--dashboard-->
<script>
    require(["./plugins/echarts/echarts.min.js"],function (echarts) {
        initHistogram(echarts);
        initPieChart(echarts);
        initPolyline(echarts);
    });

    function initHistogram(echarts){
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('histogram'));
        $.ajax({
            url:'./simdata/common_columnar.json',
            data:1,
            success:function (results) {
                var dataAxis = [];
                var data = [];
                dataAxis = results.dataAxis;
                data = results.digital;
               /* var dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
                var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];*/
                var yMax = 500;
                var dataShadow = [];

                for (var i = 0; i < data.length; i++) {
                    dataShadow.push(yMax);
                }

                option = {
                    title: {
                        text: results.text,
                        subtext: results.subText
                    },
                    xAxis: {
                        data: dataAxis,
                        axisLabel: {
                            inside: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        z: 10
                    },
                    yAxis: {
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#999'
                            }
                        }
                    },
                    dataZoom: [
                        {
                            type: 'inside'
                        }
                    ],
                    series: [
                        { // For shadow
                            type: 'bar',
                            itemStyle: {
                                normal: {color: 'rgba(0,0,0,0.05)'}
                            },
                            barGap:'-100%',
                            barCategoryGap:'40%',
                            data: dataShadow,
                            animation: false
                        },
                        {
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {offset: 0, color: '#83bff6'},
                                            {offset: 0.5, color: '#188df0'},
                                            {offset: 1, color: '#188df0'}
                                        ]
                                    )
                                },
                                emphasis: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {offset: 0, color: '#2378f7'},
                                            {offset: 0.7, color: '#2378f7'},
                                            {offset: 1, color: '#83bff6'}
                                        ]
                                    )
                                }
                            },
                            data: data
                        }
                    ]
                };

                // Enable data zoom when user click bar.
                var zoomSize = 6;
                myChart1.on('click', function (params) {
                    console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
                    myChart1.dispatchAction({
                        type: 'dataZoom',
                        startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
                        endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
                    });
                });
                myChart1.setOption(option);
            }
        });

    }
    function initPieChart(echarts) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('pieChart'));
        $.ajax({
            url:'./simdata/common_cake.json',
            data:2,
            success:function (results) {
                option = {
                    title : {
                        text: results.text,
                        subtext: results.subText,
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: results.type
                    },
                    series : [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:results.typeDetails,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option)
            }
        })


    }
    function initPolyline(echarts) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('polyLine'));

        //app.title = '多 Y 轴示例';
        $.ajax({
            url:"./simdata/common_axis.json",
            data:3,
            success:function (results) {
                var colors = ['#5793f3', '#d14a61', '#675bba'];
                var typeList = [];
                for (var i = 0; i < results.typeDetails.length; i++) {
                    typeList.push(results.typeDetails[i].name);
                }

                option = {
                    color: colors,

                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    grid: {
                        right: '20%'
                    },
                    toolbox: {
                        feature: {
                            dataView: {show: true, readOnly: false},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    legend: {
                        data:typeList
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: results.typeDetails[0].name,
                            min: 0,
                            max: 250,
                            position: 'right',
                            axisLine: {
                                lineStyle: {
                                    color: colors[0]
                                }
                            },
                            axisLabel: {
                                formatter: '{value} ml'
                            }
                        },
                        {
                            type: 'value',
                            name: results.typeDetails[1].name,
                            min: 0,
                            max: 250,
                            position: 'right',
                            offset: 80,
                            axisLine: {
                                lineStyle: {
                                    color: colors[1]
                                }
                            },
                            axisLabel: {
                                formatter: '{value} ml'
                            }
                        },
                        {
                            type: 'value',
                            name: results.typeDetails[2].name,
                            min: 0,
                            max: 25,
                            position: 'left',
                            axisLine: {
                                lineStyle: {
                                    color: colors[2]
                                }
                            },
                            axisLabel: {
                                formatter: '{value} °C'
                            }
                        }
                    ],
                    series: [
                        {
                            name:results.typeDetails[0].name,
                            type:'bar',
                            data:results.typeDetails[0].data
                        },
                        {
                            name:results.typeDetails[1].name,
                            type:'bar',
                            yAxisIndex: 1,
                            data:results.typeDetails[1].data
                        },
                        {
                            name:results.typeDetails[2].name,
                            type:'line',
                            yAxisIndex: 2,
                            data:results.typeDetails[2].data
                        }
                    ]
                };

                myChart.setOption(option)
            }
        })


    }
</script>
<!--地图-->
<!--<div id="container" style="width: 100%;height: 100%;position: absolute;left: 0;top: 0; "></div>-->
<script type="text/javascript">
//    window.amapInit = function() {
//        var map = new AMap.Map('container', {
//            resizeEnable: true,
//            zoom:11,
//            center: [116.397428, 39.90923]
//        });
//    }
</script>
<!--<script src="http://webapi.amap.com/maps?v=1.3&key=8dd7cf021ec52d4bdb8db3d6241170a2&callback=amapInit"></script>-->